<script>
export default {
  name: "LemonTabs",
  props: {
    activeIndex: String
  },
  data() {
    return {
      active: this.activeIndex
    };
  },
  mounted() {
    if (!this.active) {
      this.active = this.$slots["tab-pane"][0].data.attrs.index;
    }
  },
  render() {
    const pane = [];
    const nav = [];
    this.$slots["tab-pane"].map(vnode => {
      const { tab, index } = vnode.data.attrs;
      pane.push(
        <div class="lemon-tabs-content__pane" v-show={this.active == index}>
          {vnode}
        </div>
      );
      nav.push(
        <div
          class={[
            "lemon-tabs-nav__item",
            this.active == index && "lemon-tabs-nav__item--active"
          ]}
          on-click={() => this._handleNavClick(index)}
        >
          {tab}
        </div>
      );
    });
    return (
      <div class="lemon-tabs">
        <div class="lemon-tabs-content">{pane}</div>
        <div class="lemon-tabs-nav">{nav}</div>
      </div>
    );
  },
  methods: {
    _handleNavClick(index) {
      this.active = index;
    }
  }
};
</script>
<style lang="scss">
</style>
